Help:Image markup
This page is a tutorial for using the wiki image-formatting syntax. Basic Syntax The basic format for displaying an image inline is In the example to the right, this is the image syntax used: General details * Pipe characters (vertical bars: "|") are used to separate style options and from the caption text. * Do not put spaces around the vertical bars for readability – options will not be interpreted correctly. * Only is required. * Most images used in articles should use the "thumbnail" or "thumb" type with a caption provided (and should not specify a size). * Unrecognized options are typically ignored, although if appearing in the final parameter it may be considered as a "caption" or "alt text." * If there are two or more unrecognized options for a given sytle option parameter, the last one provided will upstage the others. : For example: : Notice that only the latter parameters for "caption" and "size" were used to display the image. Option placement In brief, the syntax order for displaying an image is: :' ' Style options can be entered in a different order and the display should still render as intended, however, for consistency's sake, the above order should be followed whenever possible. If you are too unsure of what options or the order in which to place them, you can always use the page editor's toolbar to —at least until it becomes more familiar to you. Style options Overview ; thumbnail, thumb : Generates an automatically re-sized thumbnail image, normally on the right, with the caption text displayed directly underneath. ; frame : The image will have a frame, regardless of whether it is a thumb, and the caption text will be included as a visible caption. ; right : Makes the image right-aligned; can be used with and without specifying "thumb" ; left : Same as above, but left-aligned. ; px : Renders a thumbnail version of the image with a variable—set by you—width in pixels (e.g. "200px"). The image's height is automatically adjusted to maintain the aspect ratio (i.e. the shape of the image). Thumbnails are tyically set automatically, so this parameter may be unnecessary except when the size interferes with the overall appearance of an article. However, when it is necessary, please keep in mind that specifying this overrides the preferred thumbnail size set in user preferences. Type These options will change the manner of the image's display: ; frame: The original image size is preserved, and a box is added around the image (similar to the way thumbnails are presented). If a caption is written, it is shown below the image. This type cannot be sized. ; thumb : The image is scaled down, and a box is added around the image where a caption will appear if written. Default placement is "right." This allows images to be sized, but default thumbnail size of 180 pixels will be used for non-logged-in users. ; border : The original image size is preserved, a border is added around the image and even if a caption is requested, it is not shown. If no alt text is specifically requested, then the requested caption will be used as alt text. Images can be resized using this type. (see example below) ; no type specified : Same as the "border" type, but no border is added around the image. Demonstration: Location These options may be specified to control the position of the image: ; right : Image placement: Right side of the page, article text flows around the image ; left : Image placement: Left side of the page, article text flows around the image ; center : Image placement: Center of the page, article text is placed below the image ; no location specified : Image placement: Right side of the page, article text is placed below the image Demonstration: Size The size of any image—unless displayed in "frame" type—can be changed. In the case of images with captions, if the image is already smaller than the requested size, then the image retains its original size (it is not enlarged). In the case of images without captions, the image will be enlarged or reduced to match the requested size. ; px (e.g. "100px") : Scales the image to make it the specified number of pixels in width. The height is also scaled in such a way as to retain the original aspect ratio. ; xpx" (e.g. "100x150px") : Scales the image to be no wider and no higher than the specified number of pixels. The image will keep its original aspect ratio. Typically specifying height is unnecessary. ; no size specified : Uses the size specified in preferences for logged in users and uses a size determined by resolution for anonymous users. An image may be displayed at a size smaller than the original size of the image without loss to the quality of the image. The opposite, however, is not true and images displayed larger than they exist on the server will begin to show image distortion. This should be avoided. If a larger display size is needed, you should upload the image in a larger size—''if'' the original image was larger to begin with. Link Ordinarily, an image acts as a hypertext link to the , a page with information about the image itself. Using the link option allows an image to act as a hypertext link to a different page. ; link= : The image will act as a hypertext link to the specified page. The page name must not be enclosed in square brackets, and it is always interpreted as an internal link. It is generally discouraged for external links to be used in this way. ; no link specified (default) : The image will link to its description page. Caption The caption text should consicely describe the image and should not end with a period, as seen in the examples above. It should always be placed in the final parameter. If you would prefer not to include a caption, you have three options: # Do not specify a caption parameter. # Use the "border" type of display, which will convert the caption text into alt text. # Use the text instead as an alt-text: :: alt= ::: The specified text will be used as the alt text for the image. See also * - AFD policy on the use of images in the wiki * - Assistance for image options and uses * - Covers the information discussed here, sometimes in greater detail, as well as other options like creating * - Help concerning the use and purpose of the image description page * - Directory of images on A Fifth Dimension